<template>
  <div class="statistics-card">
    <div class="item" v-for="(option,index) in cardList" :key="index">
      <div class="des">
        <div class="name">{{option.name}}</div>
        <div class="value" :style="{color:option.color?option.color:'#666666'}">{{option.value}} <span>个任务</span></div>
      </div>
      <img :src="getImage(`content/${option.imgName}.png`)">
    </div>
  </div>
</template>

<script setup lang=ts>
import { getImage } from '@/utils/util';
import { color } from 'echarts';

import { reactive  } from "vue";

export interface cardData {
 name:string,
 imgName:string,
 value:number,
 color?:string
}

withDefaults(
  defineProps<{
    cardList:Array<cardData>
  }>(),
  {
    cardList:()=>[
      {
        name:'全部任务',
        imgName:'全部任务',
        value:123,
        color:'#4C94FE'
      }
    ]
  }
)


// let cardList = reactive([
//   {
//     name:'全部任务',
//     imgName:'全部任务'
//   },
//   {
//     name:'待执行任务',
//     imgName:'待执行任务'
//   },
//   {
//     name:'进行中任务',
//     imgName:'进行中'
//   },
//   {
//     name:'已完成任务',
//     imgName:'已完成'
//   }
// ])

</script>

<style lang='less'>
.statistics-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  .item{
    width: 383px;
    height: 134px;
    background: #F9FCFF;
    box-shadow: 0px 0px 20px 5px #A5BBDC;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .des{
      .name{
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 20px;
      }
      .value{
        font-size: 36px;
        font-family: DIN-BoldItalic, DIN;
        font-weight: normal;
        span{
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666!important;
        }
      }
    }
  }
}
</style>